<template>
  <div class="background">
    <div class="register clear">
      <h2>宠物领养系统</h2>
      <div class="upload">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8081/img/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon">上传头像</i>
        </el-upload>
      </div>
      <el-form :model="formLabelAlign" :rules="rules" ref="registerForm" status-icon>
        <el-form-item label="用户名" prop="name">
          <el-input v-model="formLabelAlign.name" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="账号" prop="phone">
          <el-input v-model="formLabelAlign.phone" placeholder="请输入账号/手机号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pwd">
          <el-input v-model="formLabelAlign.pwd" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="denglu" type="primary" @click="register">注册</el-button>
        </el-form-item>
        <div class="checkbox">
          <label for="rememberMe" @click="login"> 返回登录</label>
        </div>
      </el-form>
    </div>
    <div class="hello">
        你&emsp;&emsp;好&emsp;&emsp;！
      </div>
  </div>
</template>

<script>
import axios from 'axios';
import { baseUrl } from '../store/baseUrl';

export default {
  name: 'register',
  data() {
    var validatePhone = (rule, value, callback) => {
      const phoneReg = /^1[3-9]\d{9}$/;
      if (!value) {
        return callback(new Error('手机号不能为空'));
      }
      if (!phoneReg.test(value)) {
        return callback(new Error('手机号格式不正确'));
      }
      callback();
    };
    var validatePwd = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        callback();
      }
    };
    return {
      formLabelAlign: {
        name: '',
        phone: '',
        pwd: ''
      },
      imageUrl: '',
      rules: {
        phone: [{ validator: validatePhone, trigger: 'blur' }],
        pwd: [{ validator: validatePwd, trigger: 'blur' }]
      }
    };
  },
  methods: {
    login() {
      this.$router.push('/');
    },
    handleAvatarSuccess(res, file) {
      // 使用后端返回的路径作为图像的URL
      this.imageUrl = `${baseUrl}/${res.data}`;
      // 添加 avatar 字段到 formLabelAlign 对象中，使用后端返回的数据
      this.formLabelAlign.avatar = res.data;
    },
    beforeAvatarUpload(file) {
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isPNG) {
        this.$message.error('上传头像图片只能是 PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isPNG && isLt2M;
    },
    register() {
      axios.post(`${baseUrl}/sysuser/add`, this.formLabelAlign)
        .then(response => {
          console.log(response.data);
          this.$message({
            message: response.data.msg,
            type: 'success'
          });
        })
        .catch(error => {
          console.error('There was an error!', error);
        });
    }
  }
};
</script>

<style scoped>
/* 通用样式 */
body, html {
  margin: 0;
  padding: 0;
  height: 100%; /* 设置body和html的高度为100%，确保背景图片覆盖整个视口 */
}

/* 背景图片 */
.background {
  background-image: url("../assets/R-C.gif");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: cover; /* 覆盖整个视口，自动缩放 */
  background-position: center; /* 背景图片居中 */
  background-repeat: no-repeat;
}

/* 注册框样式 */
.register {
  width: 20%;
  height: auto;
  font-size: 25px;
  background-image: linear-gradient(white, #faf2cc);
  margin: 0;
  text-align: center;
  border-radius: 30px;
  border: 1px solid white;
  padding: 3% 5%;
  box-shadow: 5px 6px 10px #FFFFFF;
  position: absolute; /* 使用绝对定位 */
  top: 5%; /* 距离顶部的距离 */
  right: 3%; /* 距离右侧的距离 */
}

h2 {
  color: #000000;
  margin-top: 5%;
}

.denglu {
  margin-top: 50px;
  width: 100%;
  height: 60px;
  border-radius: 20px;
  border: 0;
  color: #fff;
  text-align: center;
  line-height: 40px;
  font-weight: 400;
  font-size: 20px;
  background-image: linear-gradient(to bottom, #ffff00, #fbb450);
}

/* 上传头像 */
.upload {
  border: 2px dashed #d1ca95;
  border-radius: 6px;
  width: 178px;
  height: 178px;
  margin: 0 auto 20px; /* 居中显示并增加底部间距 */
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 15px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.checkbox{
  color: #0077ff;
  /* font-size: larger; */
}
.clear::after {
  content: '';
  display: block;
  clear: both;
}
/* 欢迎语 */
.hello {
  position: absolute;
  top: 150px;
  left: 300px;
  font-size: 60px;
  font-family: "幼圆";
  font-weight: bolder;
  color: rgb(255, 255, 254);
  user-select: none;
  writing-mode: vertical-lr;
  align-items: center;
}
</style>